import React, { Component } from 'react'

import { Card, Table, Modal, message, Button,Form ,Select} from 'antd'
import Axios from './../../axios'
import Utils from '../../utils/utils'
import './../../style/common.less'
const FormItem=Form.Item;
const Option = Select.Option;

export default class City extends Component {
    state = {
        idshowOpenCity: false
    }
    params = {
        page: 1
    }
    componentDidMount() {
        this.requestList()
    }
    // 默认请求接口数据
    requestList = () => {
        let _this = this
        Axios.ajax({
            url: '/open_city',
            data: {
                params: {
                    page: this.params.page
                }
            }
        }).then((res) => {
            this.setState({
                list: res.result.item_list.map((item, index) => {
                    item.key = index;
                    return item;
                }),
                pagination: Utils.pagination(res, (current) => {
                    _this.params.page = current;
                    _this.requestList();
                })
            })
        })
    }
    // 开通城市
    handleOpenCity = () => {
        this.setState({
            isshowOpenCity: true
        })
    }
    // 提交开通城市
    handleSubmit = () => {
        let cityInfo = this.cityForm.props.form.getFieldsValue()
        //   console.log(cityInfo)
        Axios.ajax({
            url: '/city/open',
            data:{
                params:cityInfo
            }
        }).then((res) => {
            if (res.code === '0' || res.code === 0) {
                message.success('开通成功');
                this.setState({
                    isshowOpenCity: false
                })
                this.requestList()
            }
        })
    }
    render() {
        const columns = [
            {
                title: '城市ID',
                dataIndex: 'id'
            },
            {
                title: '城市名称',
                dataIndex: 'name'
            },
            {
                title: '用车模式',
                dataIndex: 'mode',
                render(mode) {
                    return mode === 1 ? "停车点" : "禁停区"
                }
            },
            {
                title: '营运模式',
                dataIndex: 'op_mode',
                render(op_mode) {
                    return op_mode === 1 ? '自营' : '加盟'
                }
            },
            {
                title: '授权加盟商',
                dataIndex: 'franchisee_name'
            },
            {
                title: '城市管理员',
                dataIndex: 'city_admins',
                render(arr) {
                    return arr.map((item) => {
                        return item.user_name
                    }).join(',');
                }
            },
            {
                title: '城市开通时间',
                dataIndex: "open_time",
                // 这里是自定义的工具
                render: Utils.formateDate
            },
            {
                title: '操作时间',
                dataIndex: 'update_time',
                // 这里是自定义的工具
                render:Utils.formateDate
            },
            {
                title: '操作人',
                dataIndex: 'sys_user_name'
            }
        ]
        return (
            <div>
              <Card>
                    <FilterForm></FilterForm>
              </Card>
                <Card style={{ marginTop: 10 }}>
                    <Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
                </Card>
                <div className="content-wrap">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                    />
                </div>
                <Modal
                    title="开通城市"
                    visible={this.state.isshowOpenCity}//控制Modal是显示还是隐藏
                    onCancel={() => {
                        this.setState({
                            isshowOpenCity: false
                        })
                    }}
                    onOk={this.handleSubmit}
                >
                    <OpenCityForm
                        wrappedComponentRef={(inst) => {
                            this.cityForm = inst;
                        }}
                    ></OpenCityForm> 
                </Modal>
            </div>
        )
    }
}
class FilterForm extends Component{
    render(){
        const { getFieldDecorator } = this.props.form;
        // 用这个可以实现双向数据绑定 
        return (
            <Form layout="inline">
                <FormItem label="城市">
                    {
                        getFieldDecorator('city_id')(
                            // 双向数据绑定是你选择的值会自动绑定到city_id里
                            <Select
                                style={{ width: 100 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">深圳市</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="用车模式">
                    {
                        getFieldDecorator('mode')(
                            <Select
                                style={{ width: 120 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">指定停车点模式</Option>
                                <Option value="2">禁停区模式</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="营运模式">
                    {
                        getFieldDecorator('op_mode')(
                            <Select
                                style={{ width: 80 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">自营</Option>
                                <Option value="2">加盟</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="加盟商授权状态">
                    {
                        getFieldDecorator('auth_status')(
                            <Select
                                style={{ width: 100 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">已授权</Option>
                                <Option value="2">未授权</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type="primary" style={{ margin: '0 20px' }}>查询</Button>
                    <Button>重置</Button>
                </FormItem>
            </Form>
        )
      
    }
}
FilterForm = Form.create({})(FilterForm);
class OpenCityForm extends React.Component {
    render() {
        // 指定form表单的栅格
        const formItemLayout = {
            labelCol: { span: 5 },//label占几个格
            wrapperCol: { span: 19 }//内容占几个格
        }

        const { getFieldDecorator } = this.props.form
        return (
            <Form layout="horizontal">
                <FormItem label="选择城市" {...formItemLayout}>
                    {
                        getFieldDecorator('city_id', {
                            initialValue: '1'
                        })(
                            <Select style={{ width: 100 }}>
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="运营模式" {...formItemLayout}>
                    {
                        getFieldDecorator('op_mode', {
                            initialValue: '1'
                        })(
                            <Select style={{ width: 100 }}>
                                <Option value="1">自营</Option>
                                <Option value="2">加盟</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="用车模式" {...formItemLayout}>
                    {
                        getFieldDecorator('use_mode', {
                            initialValue: '1'
                        })(
                            <Select style={{ width: 100 }}>
                                <Option value="1">指定停车点</Option>
                                <Option value="2">禁停区</Option>
                            </Select>
                        )
                    }
                </FormItem>
            </Form>
        )
    }
}
OpenCityForm = Form.create()(OpenCityForm)